<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">用户管理</h2>
	    </div>
	    <div class="cloud-body">
	    	<div class="r-userinfo-item r-borderBottom">
	    		<div class="r-userinfo-title">基本信息：</div>
	    		<div class="r-userinfo-main">
	    			<div class="r-userinfo-avatar">
	    				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596607014784&di=7972a4806076f15d0c0c745e83f3cdb9&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F30adcbef76094b36c896219ba1cc7cd98d109dbb.jpg">
	    			</div>
	    			<ol class="r-item-info">
	    				<li>用户ID：0012639</li>
	    				<li>会员手机：18854138769</li>
	    				<li>上次购买时间：2019-01-25 10:55</li>
	    			</ol>
	    			<ol class="r-item-info">
	    				<li>微信昵称：爱吃阿司匹林的喵</li>
	    				<li>注册时间：2019-01-25 10:55</li>
	    				<li>会员等级：4</li>
	    			</ol>
	    			<div class="r-display">
	    				<span class="r-item-label">用户备注：</span>
	    				<div class="r-member-card">优质会员</div>
	    			</div>
	    		</div>
	    	</div>


			<div class="r-userinfo-item">
				<div class="r-userinfo-title">统计信息：</div>
				<div class="r-userinfo-main">
				    <Table :datas="statistics" :border="false" :checkbox="false" :stripe="false" :loading="false">
				      <TableItem align="center" title="消费金额" prop="consume"></TableItem>
				      <TableItem align="center" title="订单数量" prop="order_number"></TableItem>
				      <TableItem align="center" title="邀请好友" prop="invite_user"></TableItem>
				      <TableItem align="center" title="优惠券" prop="coupon"></TableItem>
				      <TableItem align="center" title="积分" prop="integral"></TableItem>
				      <TableItem align="center" title="参加活动数量" prop="activities_num"></TableItem>
				      <TableItem align="center" title="上次登录时间" prop="last_time"></TableItem>
				      <div slot="empty">暂无记录</div>
				    </Table>
				</div>
			</div>


			<div class="r-userinfo-item">
				<div class="r-userinfo-title">消费记录：</div>
				<div class="r-userinfo-main">
				    <Table :datas="consume_log" :border="false" :checkbox="false" :stripe="false" :loading="false">
				      <TableItem title="订单编号" prop="order_sn" :width="160"></TableItem>
				      <TableItem title="用户微信" prop="nickname"></TableItem>
				      <TableItem title="用户手机" prop="molibe"></TableItem>
				      <TableItem title="商品名称" prop="goods_name"></TableItem>
				      <TableItem align="center" title="订单金额（元）" prop="order_price"></TableItem>
				      <TableItem align="center" title="订单状态" prop="order_status"></TableItem>
				      <TableItem align="center" title="提交时间" prop="submit_time"></TableItem>
				      <TableItem title="操作" align="center" :width="160">
				      		<template slot-scope="{data}">
				      			<div class="r-item-action">
					      			<div @click="intCheck(consume_log, data)" class="r-action-button">查看订单</div>
				      			</div>
				      		</template>
				      </TableItem>
				      <div slot="empty">暂无记录</div>
				    </Table>
				</div>
			</div>


			<div class="r-userinfo-item">
				<div class="r-userinfo-title">领取记录：</div>
				<div class="r-userinfo-main">
				    <Table :datas="coupons" :border="false" :checkbox="false" :stripe="false" :loading="false">
				      <TableItem title="卡券编号" prop="sn" :width="160"></TableItem>
				      <TableItem title="卡券名称" prop="name"></TableItem>
				      <TableItem align="center" title="列表图">
				      	<div slot-scope="{data}">
				      		<img class="r-userinfo-image" :src="data.image" />
				      	</div>
				      </TableItem>
				      <TableItem align="center" title="使用状态" prop="status"></TableItem>
				      <TableItem align="center" title="卡券类型" prop="type"></TableItem>
				      <TableItem align="center" title="领取时间" prop="receive_time"></TableItem>
				      <div slot="empty">暂无记录</div>
				    </Table>
				</div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'',
		data(){
			return {
				/**
				 * 统计信息
				 * @type {Array}
				 */
				statistics:[
					{consume:100.00,order_number:25,invite_user:5,coupon:32,integral:320,activities_num:6,last_time:'2020-04-26'}
				],

				/**
				 * 消费记录
				 * @type {Array}
				 */
				consume_log:[
					{order_sn:2019030102369669,nickname:'Cassy',molibe:'18541263699',goods_name:'10元抵扣券',order_price:'2399.00',order_status:'待支付',submit_time:'2019-01-25 10:55'},
					{order_sn:2019030102369669,nickname:'Cassy',molibe:'18541263699',goods_name:'10元抵扣券',order_price:'2399.00',order_status:'待支付',submit_time:'2019-01-25 10:55'},
					{order_sn:2019030102369669,nickname:'Cassy',molibe:'18541263699',goods_name:'10元抵扣券',order_price:'2399.00',order_status:'待支付',submit_time:'2019-01-25 10:55'}
				],

				/**
				 * 领取记录
				 * @type {Array}
				 */
				coupons:[
					{sn:20190302000236,name:'10元抵扣券',image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3603927680,1115263328&fm=26&gp=0.jpg',status:'已核销',type:'抵扣券',receive_time:'2019-01-25 10:55'},
					{sn:20190302000236,name:'10元抵扣券',image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3603927680,1115263328&fm=26&gp=0.jpg',status:'已核销',type:'抵扣券',receive_time:'2019-01-25 10:55'},
					{sn:20190302000236,name:'10元抵扣券',image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3603927680,1115263328&fm=26&gp=0.jpg',status:'已核销',type:'抵扣券',receive_time:'2019-01-25 10:55'},
					{sn:20190302000236,name:'10元抵扣券',image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3603927680,1115263328&fm=26&gp=0.jpg',status:'已核销',type:'抵扣券',receive_time:'2019-01-25 10:55'},
					{sn:20190302000236,name:'10元抵扣券',image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3603927680,1115263328&fm=26&gp=0.jpg',status:'已核销',type:'抵扣券',receive_time:'2019-01-25 10:55'}
				]
				
			}
		},
		methods:{
			intCheck(source,data){
				console.log('选中',data)

			}
		}
	}
</script>
<style type="text/css" lang="less">
.cloud-header{
	margin-bottom: 20px;
}
.r-title-h2{
	border-left: solid 5px #2d7bf4;
	padding-left: 10px;
	margin-bottom: 0px !important;
}
.r-borderBottom{
	border-bottom: solid 1px rgba(228, 228, 228, 1);
}
.r-userinfo-item{
	color: #666666;
	margin-bottom: 30px;
	.h-table{
		border:none;
		border-bottom: solid 1px #eeeeee;
		th{
			background-color: #fff;
		}
		.r-action-button{
			color: #2d7bf4;
			cursor: pointer;
		}
		.r-userinfo-image{
			width: 50px;
			height: 50px;
		}
	}
	.r-userinfo-title{
		border-left: solid 3px #2d7bf4;
		font-size: 16px;
		font-weight: bold;
		line-height: 12px;
		padding-left: 5px;
		margin-bottom: 20px;
		color: #000;
	}
	.r-userinfo-main{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.r-userinfo-avatar{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 80px;
		margin-right: 20px;
		img{
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
	}
	.r-item-info{
		flex:1;
		>li{
			margin-bottom: 20px;
		}
	}
	.r-display{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.r-member-card{
		width: 280px;
		height: 110px;
		border:solid 1px rgba(228, 228, 228, 1);
		border-radius: 5px;
		padding: 10px;
		margin-top: -10px;
	}
}
</style>